<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head th:replace="/common/template :: header(~{::title},~{::link},~{::style})"></head>
<style>
    .layui-table-tool-temp {
        padding: 0 !important;
    }
</style>
<body>
	<div class="layui-fluid">
		<table id="service-table" lay-filter="service-table"></table>
	</div>
	<!-- 工具栏 -->
	<script type="text/html" id="toolbarService">
        <div class="layui-btn-container" style="display: flex;justify-content: flex-end;">
			<button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon layui-icon-add-circle" ></i>添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchRemove"><i class="layui-icon layui-icon-delete"></i>删除</button>
        </div>
    </script>
	<!-- 操作列 -->
	<script type="text/html" id="service-state">
     <div class="layui-btn-group">
        <button  class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
        <button  class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </div>
    </script>
    <script th:replace="/common/template :: script"></script>
	<script>
        var active;
		layui.use([ 'table' ], function() {
			var $ = layui.jquery;
			var table = layui.table;
			// 渲染表格
			var renderTable = function() {
				layer.load(2);
				table.render({
					elem : '#service-table',
					url : '/service/setmeal/list',
					toolbar : '#toolbarService',
                    defaultToolbar: [],
					page : true,
					id : 'serviceReload',
					parseData:chaoLayuiTable.parseData,
					request:chaoLayuiTable.request,
					response:chaoLayuiTable.response,
					//limit : 1,
					cols : [ [ {
						type : 'checkbox',
						fixed : 'left'
					},
                    {
                        width : 80,
                        type: 'numbers',
                        align : 'center',
                        title : '序号',
                    },
 					{
						align : 'center',
					    field : 'serviceName',
						title : '服务名称',
					},
 					{
						align : 'center',
					    field : 'serviceType',
						title : '服务类型',

					},
 					{
						align : 'center',
					    field : 'price',
						title : '价格',

					},
 					{
						align : 'center',
					    field : 'integral',
						title : '积分',

					},
 					{
						align : 'center',
					    field : 'isReservation',
						title : '是否预约',
                        templet: function(d){
                            return d.isReservation==1?"是":"否";
                        }

					},
 					{
						align : 'center',
					    field : 'serviceCount',
						title : '服务数量',
                        templet: function(d){
						    if(d.serviceCount=='-1'){
                                return "不限量";
                            }else {
						        return d.serviceCount;
                            }

                        }

					},
 					{
						title : '操作',
						toolbar : '#service-state',
						align : 'center'
					} ] ],
					done : function() {
						layer.closeAll('loading');
					}
				});

			};
			renderTable();
			// 搜索
            active = {
				reload : function() {
					//执行重载
					table.reload('serviceReload', {
						page : {
							curr : 1
						//重新从第 1 页开始
						},
						where : {

						}
					});
				}
			};

			$('#search').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});

			//头工具栏事件
			table.on('toolbar(service-table)', function(obj) {
				var checkStatus = table.checkStatus(obj.config.id);
				switch (obj.event) {
				case 'add'://增加
					openAdd();
					break;
				case 'batchRemove'://批量删除
					var data = checkStatus.data;
					if (data.length < 1) {
						layer.msg('请至少选择一个');
						break;
					}
					//批量删除
					batchRemove(data);
				}
			});

			//监听工具条
			table.on('tool(service-table)', function(obj) {
				var data = obj.data;
				var layEvent = obj.event;
				if (layEvent === 'del') {//删除
					remove(data.serviceId);
				} else if (layEvent === 'edit') {//修改
					edit(data.serviceId);
				}
			});

			function remove(id) {
                parent.layer.confirm('确定要删除选中的记录？', {
					btn : [ '确定', '取消' ]
				}, function() {
					//删除
                    CoreUtil.ajaxPostLoad('/service/setmeal/remove', {
						serviceId : id
					},true,active);
				})
			}

			function batchRemove(data) {
                parent.layer.confirm("确认要删除选中的'" + data.length + "'条数据吗?", {
					btn : [ '确定', '取消' ]
				}, function() {
					var ids = new Array();
					$.each(data, function(i, row) {
						ids[i] = row['serviceId'];
					});
					console.log("remove->ids:" + ids);
					//批量删除
                    CoreUtil.ajaxPostLoad('/service/setmeal/batchRemove', {
						serviceIds : ids
					},true,active);
				});
			}

			function edit(id) {
                layer.open({
					type : 2,
					title : '修改',
					maxmin : true,
					shadeClose : false, // 点击遮罩关闭层
					area : [ '60%', '100%' ],
					content : '/service/setmeal/edit/' + id // iframe的url
				});
			}

			function openAdd() {
                layer.open({
					type : 2,
					title : '增加',
					maxmin : true,
					shadeClose : false, // 点击遮罩关闭层
					area : [ '60%', '70%' ],
					content : '/service/setmeal/add' // iframe的url
				});
			}
		});
	</script>
</body>
</html>